<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单格</title>
	<link rel="stylesheet" type="text/css" href="css/123.css">
	
</head>
<body>
	<table border="1">
		<thead>
			<tr><th colspan="5"  class="tablo">表单格</th></tr>
			<tr>
				<th>序号</th>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>操作</th>
			</tr>
</thead>
<tbody>
	<tr>
		<th>1</th>
		<th>练习本</th>
		<th>3.5</th>
		<th>2</th>
		<td><button onclick="delRow()">删除</button>
			<button onclick="delRow()">添加</button>

</tr>
    <tr>
		<th>2</th>
		<th>文具盒</th>
		<th>5</th>
		<th>2</th>
		<td><button onclick="delRow()">删除</button>
			<button onclick="delRow()">添加</button>

</tr>
    <tr>
		<th>3</th>
		<th>橡皮差</th>
		<th>2</th>
		<th>2</th>
		<td><button onclick="delRow()">删除</button>
			<button onclick="delRow()">添加</button>

</tr>
<tr>
		<th>4</th>
		<th>钢笔</th>
		<th>8</th>
		<th>2</th>
		<td><button onclick="delRow()">删除</button>
			<button onclick="delRow()">添加</button>

</tr>
<tr>
		<th>5</th>
		<th>iPhone 7 puls</th>
		<th>5800</th>
		<th>1</th>
		<td><button onclick="delRow()">删除</button>
			<button onclick="delRow()">添加</button>

</tr>
</tbody>
<tr>
	<td colspan="5">
		<p>总计</p>
	</td>
</td>
</tr>
</table>
<div class="shad">
	<div class="panel">
		<h4 class="header">请输入表单信息</h4>
		<div class="inners">
			<input type="text" name="googs" value="" placeholder="请输入商品名称"><br>
			<input type="text" name="googs" value="" placeholder="请输入商品单价"><br>
			<input type="text" name="googs" value="" placeholder="请输入商品数量"><br>
			<div class="options">
				<button>确定</button>
				<button>取消</button>

			</div>
			


			</div>
		</div>




</div>
<script type="text/javascript" src="good/yu/123.js"></script>
<script type="text/javascript">
      $('tbody tr:odd').css('background-color','#ccc'); 
      $('tbody tr:even').css('background-color','#fff');

      function delRow(bt){
               $(bt).parent().parent().remove();
               $('tbody tr').removeClass();
               $('tbody tr:odd').addClass('odd');

               for (var i = 0; i < $('tbody tr').length; i++) {
                 $('tbody tr:eq('+i+')').find('td:first').text(i+1);
               }
      }
      function delup(be){
        $(be).parent().parent().click(function(){
          $('.show').css('display','block');
        })
      } 
        var loop=function(){
          $('.show').css('display','block');        
      }       
      $('.cha, .ljio').click(function(){
          $('.show').hide();
          $('input[name=good]').val('');
          $('input[name=price]').val('');
          $('input[name=num]').val('');
      })
    
        

        $('.poop').click(function(){
          $('.show').hide();  
          var ntr= $('tbody tr').length;
          var sn= $('tbody tr:eq('+(ntr-2)+')').find('td:first').text();

          var good=$('input[name=good]').val();
          var price=$('input[name=price]').val();
          var num=$('input[name=num]').val(); 

          var tr=$('<tr><td>'+(parseInt(sn)+1)+'</td><td>'+good+'</td><td>'+price+'</td><td>'+num+'</td><td>\
          <button onclick="delRow(this)">删除</button> <button  onclick="delup(this)">添加</button></td></tr>');

          $('tbody tr:eq('+(ntr-2)+')').after(tr);
         });



    </script>   

















	
</body>
</html>